<template>
  <div class="home">
    <!-- 侧边菜单 -->
    <left :list="getTabsList" />
    <!-- 右边区域 -->
    <div class="rightBox">
      <right />
      <div class="box-card">
        <el-card class="card">
          <router-view />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import left from "./component/left.vue";
import right from "./component/right.vue";
import { mapGetters } from "vuex";
export default {
  name: "index",
  components: { left, right },
  data() {
    return {
      defaultActive: 1,
      actve: "选择菜单",
    };
  },
  computed: {
    ...mapGetters("config", ["getTabsList"]),
  },
  created() {},
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },

    get() {
      this.axios({
        url: "/admin",
        method: "get",
        params: {
          uname: "aa",
        },
      }).then((res) => {
        console.log(res);
      });
    },
    post() {
      this.axios({
        url: "/admin",
        method: "post",
        data: {
          id: 123,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    routerProp() {
      this.axios({
        url: "/admin/123",
        method: "get",
        params: {
          uname: "aa",
        },
      }).then((res) => {
        console.log(res);
      });
    },
    onclick(event) {
      this.actve = event.name;
      console.log(this.$router);
      if (this.$router.options.base == event.path) return;
      this.$router.push(event.path);
    },
  },
};
</script>
<style scoped lang='scss'>
.viewBox-enter-active {
  animation: atguigu 0.6s linear;
}
.viewBox-leave-active {
  /* animation: atguigu 0.5s ease-out reverse; */
}

@keyframes atguigu {
  from {
    // opacity: 0;
    // display: none;
  }
  to {
    // opacity: 1;
    // display: block;
  }
}
.home {
  display: flex;
  height: 100%;
  .rightBox {
    overflow: hidden;
    width: 100%;
    background: rgb(240, 242, 245);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  }
  .box-card {
    margin: 8px;
    height: 80%;
    // width: 100%;
    overflow: auto;
    .card {
      padding-bottom: 20px;
    }
  }
  .box-card::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    position: absolute;
  }
  .box-card::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: #ddd;
    // background-image: -webkit-linear-gradient(
    //   45deg,
    //   rgba(255, 255, 255, 0.2) 25%,
    //   transparent 25%,
    //   transparent 50%,
    //   rgba(255, 255, 255, 0.2) 50%,
    //   rgba(255, 255, 255, 0.2) 75%,
    //   transparent 75%,
    //   transparent
    // );
  }
  .box-card::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0);
    border-radius: 10px;
  }
}
</style>